<template>
	<view class="container">
		<view class="header flex flex-align flex-center">请填写姓名手机号等相关信息</view>
		<view class="main">
			<view class="list flex flex-align">
				<view class="left">姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="name" />
			</view>
			<view class="list flex flex-align">
				<view class="left">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="list flex flex-align">
				<view class="left">微信号</view>
				<input type="text" placeholder="请输入微信号" v-model="wetchat" />
			</view>
			<view class="list flex flex-align">
				<view class="left">社区名称</view>
				<input type="text" placeholder="请输入社区名称" v-model="sheName" />
			</view>
			<view class="list flex flex-align flex-bt" style="position: relative;">
				<view class="left flex flex-align" style="width: 660rpx;">
					<view class="name" style="width: 150rpx;">所在位置</view>
					<input type="text" :disabled="true" placeholder="请输入所在位置" v-model="address" />
				</view>
				<view class="right">
					<tui-icon name="arrowright" color="#999" :size="28"></tui-icon>
				</view>
				<view @click="getAddress"
					style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 11;background: transparent;">
				</view>
			</view>
			<view class="list flex flex-align">
				<view class="left">详细地址</view>
				<input type="text" placeholder="请输入详细地址" v-model="addInfo" />
			</view>
			<view class="btns" @click="submite">{{status==2?'审核中':'提交申请'}}</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				name: '',
				phone: '',
				wetchat: '',
				sheName: '',
				address: '',
				addInfo: '',
				longitude:'113.74161',
				latitude:'34.39605',
				status:''
			}
		},
		onLoad(e) {
			qqmapsdk = new QQMapWX({
				key: 'KG3BZ-MIYLZ-VDCXE-72RBD-S3LTS-LYBZM'
			});
			this.getData()
		},
		methods: {
			getData(){
				let that = this
				that.tui.request("api.auth.live/communityInfo", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.status =res.data.info.status						
						if(res.data.info.status==2){
							that.name = res.data.info.name
							that.phone = res.data.info.phone
							that.wetchat = res.data.info.wx_code
							that.longitude = res.data.info.longitude
							that.latitude = res.data.info.latitude
							that.sheName = res.data.info.community_name
							that.address = res.data.info.address_area
							that.addInfo = res.data.info.address
						}
					}
				
				}).catch((res) => {
				
				})
			},
			submite() {
				let that = this
				if(that.status==2){
					return
				}
				that.tui.request("api.auth.live/communityApply", "POST", {name:that.name,phone:that.phone,wx_code:that.wetchat,longitude:that.longitude,latitude:that.latitude,community_name:that.sheName,address_area:that.address,address:that.addInfo}, false, false, true).then((res) => {
					console.log(res)
					that.tui.toast(res.info)
					if(res.code==1){
						that.getData()
					}

				}).catch((res) => {

				})
			},
			getAddress() {
				let that = this
				if(that.status==2){
					return
				}
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						that.address =res.name
						that.addInfo = res.address
						
					}
				})
				// uni.getLocation({
				// 	type: "gcj02",
				// 	success(res) {
				// 		console.log(res);
				// 		qqmapsdk.reverseGeocoder({
				// 			location: {
				// 				latitude: res.latitude,
				// 				longitude: res.longitude
				// 			},
				// 			success: function(res1) {
				// 				console.log(res1.result);

				// 			},
				// 			fail: function(res) {
				// 				console.log(res);
				// 			}
				// 		})
				// 	},
				// 	fail(err) {

				// 	}
				// });
			},
			formatLocation(longitude, latitude) {
				if (typeof longitude === 'string' && typeof latitude === 'string') {
					longitude = parseFloat(longitude)
					latitude = parseFloat(latitude)
				}

				longitude = longitude.toFixed(2)
				latitude = latitude.toFixed(2)

				return {
					longitude: longitude.toString().split('.'),
					latitude: latitude.toString().split('.')
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.header {
		height: 180rpx;
		color: #fff;
		background: #fe3b0f;
		font-size: 32rpx;
	}

	.main {
		margin: 30rpx;

		.list {
			height: 100rpx;
			border-bottom: 1px solid #eee;

			.left {
				width: 150rpx;
			}

			view,
			input {
				font-size: 28rpx;
			}
			input {
				width: 500rpx;
			}
		}

		.btns {
			background: #fe3b0f;
			color: #fff;
			font-size: 28rpx;
			line-height: 90rpx;
			border-radius: 90rpx;
			width: 600rpx;
			margin: 50rpx auto;
			text-align: center;
		}
	}
</style>